<template>
    <div class="contain-box">
        <div class="box-header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>资金管理</el-breadcrumb-item>
                <el-breadcrumb-item>收款单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="box-set">
            <el-input v-model="pageObj.queryStr" placeholder="单据编号/收款方" style="width: 220px;margin-right: 10px"
                      size="small"></el-input>

            <el-button @click="findPage" type="primary" style="background-color: #1abc9c" size="mini">查 询</el-button>
            <el-button @click="reset" size="mini">重 置</el-button>
        </div>
        <div class="box-title">
            查询结果 : 共计 <span style="color: #1abc9c">{{total}}</span> 条数据
        </div>
        <div class="box-form">
            <div class="form-header">
                <el-button type="primary" style="background-color: #1abc9c" size="small"
                           @click="getInAddCollectionDocument">新增收款单
                </el-button>
            </div>
            <div class="form-table">
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="moneyTime"
                            label="收款日期"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="documentNum"
                            label="单据编号"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="付款方"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="totalMoney"
                            label="应收款金额(元)"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            label="优惠金额(元)"
                            align="center"
                    >
                        <template slot-scope="scope">
                            {{scope.row.totalMoney-scope.row.actualMoney}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="actualMoney"
                            label="实收金额(元)"
                            align="center"
                    >
                    </el-table-column>
                    <!--                    <el-table-column-->
                    <!--                            label="结算方式"-->
                    <!--                            align="center"-->
                    <!--                    >-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            {{scope.row.status === 1 ? '支付宝' :scope.row.status === 2 ? '微信': '现金' }}-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                    <el-table-column
                            label="操作"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-button @click="toDetail(scope.row.id)" size="small" type="text" style="color: #1abc9c">详
                                情
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            <div class="form-page">
                <el-pagination
                        background
                        @current-change="handleSelectionChange"
                        :current-page="pageObj.pageIndex"
                        :page-size="pageObj.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                total: 0,
                pageObj: {
                    pageIndex: 1,
                    pageSize: 5,
                    type: 1,
                    queryStr: null
                },
                tableData: [],
            }
        },
        created() {
            this.findPage()
        },
        methods: {
            toDetail(id) {
                this.$router.push('/DetailCollectionDocument?id=' + id)
            },
            reset() {
                this.pageObj.queryStr = null;
                this.findPage()
            },

            findPage() {
                this.axios.post('/collectPayOrder/findPage', this.pageObj).then(res => {
                    if (res.data.code === 200) {
                        this.tableData = res.data.data.data
                        this.total = res.data.data.total
                    }
                })
            },
            handleSelectionChange(currentPage) {
                this.pageObj.pageIndex = currentPage;
                this.findPage();
            },
            getInAddCollectionDocument() {
                this.$router.push('/AddCollectionDocument')
            }
        }
    }
</script>

<style scoped lang="less">
    .contain-box {
        width: 100%;
        height: 100%;

        .box-header {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .box-set {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .box-title {
            width: 100%;
            margin: 20px 0;
            padding: 10px 20px;
            border-radius: 5px;
            box-sizing: border-box;
            background-color: rgba(26, 188, 156, 0.2);
            color: #666;
            font-size: 14px;
        }

        .box-form {
            width: 100%;
            height: calc(100% - 150px);

            .form-header {
                width: 100%;
            }

            .form-table {
                margin-top: 20px;
                width: 100%;
            }

            .form-page {
                margin-top: 50px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                /deep/ .el-pager .active {
                    background-color: #1abc9c;
                }
            }
        }
    }
</style>
